<template>
  <!-- 打印调拨出库单 -->
  <div ref="print" style="width:100%; margin: 0 auto;" v-show="isPreview">
    <div v-for="(items, index) in list" :key="index + 100">
      <!-- <div class="repaircaption">{{nowTime}}</div> -->
      <!-- <h1 style="clear:both;line-height:50px;font-weight:bold;margin:0;text-align:center;"
    >{{data.title}}</h1> -->
      <!-- <div style="clear:both;">
      <div style="float:left;width:50%;margin:0;font-size:14px;">
        <span style="padding-left:5%;">承修单位(章):</span>
        <span>上海绿地---</span>
      </div>
      <div style="float:left;width:50%;margin:0;font-size:14px;">
        <span style="padding-left:25%;">电话:</span>
        <span>021-56651999</span>
      </div>
    </div> -->
      <table class="bor-through">
        <tr>
          <div class="l" style="padding-left: -30px"><img :src="data.title" width="200px" height="15px" /></div>
          <td width="33%" align="center" height="24" style="font-size: 24px;"></td>
          <td width="33%" align="center" height="24" style="font-size: 30px;">出库单</td>
          <td width="33%" align="right" height="24" style="font-size:12px;"></td>
        </tr>
      </table>

      <table class="fs12" style="width:calc(100% - 50px);margin-left: 25px;">
        <tr>
          <td style="text-align:right;">打印时间:{{ nowTime }}</td>
        </tr>
      </table>

      <table class="bor">
        <!-- <tr>
        <td colspan="7" align="left" height="26">&nbsp;</td>
      </tr> -->

        <!-- <tr>
        <td colspan="7" align="right" height="26">&nbsp;</td>
      </tr> -->
        <tr>
          <td align="left" width="12%" height="26">出库单号</td>
          <td align="left" width="12%" height="26">{{ data.baseInfo.ALLOCATE_OUT_NO }}</td>
          <td align="left" width="12%" height="26">单据类型</td>
          <td align="left" width="12%" height="26">调拨出库单</td>
          <td align="left" width="12%" height="26">调拨单号</td>
          <td align="left" width="12%" height="26">{{ data.baseInfo.ALLOCATE_OUT_NO }}</td>
        </tr>
        <tr>
          <td align="left" width="12%" height="26">出库物品类型</td>
          <td align="left" width="12%" height="26">配件</td>
          <td align="left" width="12%" height="26">出库日期</td>
          <td align="left" width="12%" height="26">{{ data.detailInfo[0].FINISHED_DATE }}</td>
          <td align="left" width="12%" height="26">出库时间</td>
          <td align="left" width="12%" height="26">{{ data.detailInfo[0].FINISHED_TIME }}</td>
        </tr>
        <tr></tr>
      </table>

      <table class="bor">
        <tr style="font-size:12px;height:30px">
          <td width="5%" height="26" align="center">序号</td>
          <td width="14%" align="center">配件件号</td>
          <td width="12%" align="center">配件名称</td>
          <td width="5%" align="center">单位</td>
          <td width="7%" align="center">出库数量</td>

          <td width="9%" align="center">出库单价(元)</td>
          <td width="9%" align="center">合计(元)</td>

          <td width="5%" align="center">仓库</td>
          <td width="9%" align="center">库位代码</td>
        </tr>
        <tr v-for="(x, indexItem) in items.arr" :key="x.index + 'item'" style="font-size:12px;height:30px">
          <td align="center" height="24">{{ x.index + 1 }}</td>
          <td align="center">{{ x.PART_NO }}</td>
          <td align="center">{{ x.PART_NAME }}</td>
          <td align="center">{{ x.UNIT_NAME }}</td>
          <td align="center">{{ x.OUT_QUANTITY.toFixed(2) }}</td>

          <td align="center">{{ x.OUT_PRICE.toFixed(2) }}</td>
          <td align="center">{{ x.OUT_AMOUNT.toFixed(2) }}</td>

          <td align="center">{{ x.STORAGE_NAME }}</td>
          <td align="center">{{ x.STORAGE_POSITION_CODE }}</td>
        </tr>
        <tr v-show="items.isLast">
          <td align="center">合计(元)</td>
          <td colspan="3"></td>
          <td align="center">{{ totalQuantity }}</td>
          <td></td>
          <td align="center">{{ totalPrice }}</td>
          <td colspan="2"></td>
        </tr>
      </table>

      <table>
        <tr>
          <td align="left" width="10%" height="26">申请人:{{ data.baseInfo.HANDLER }}</td>
          <td align="center" width="10%">打印人:{{ data.baseInfo.USER_NAME }}</td>
          <td align="right" width="10%">打印人签字:____________</td>
        </tr>
      </table>

      <p style="text-align:left;">本单一式三份</p>
      <div style="page-break-after: always;height: 0;">&nbsp;</div>
    </div>
  </div>
</template>

<script>
import moment from 'moment';
import { getAppId } from '@/assets/js/auth';

export default {
  name: 'templateSales',
  props: {
    data: {
      type: Object,
      required: true,
      default() {
        return {};
      }
    },
    isPreview: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      nowTime: moment().format('YYYY-MM-DD HH:mm:ss'),
      list: []
    };
  },
  created() {
    this.handle();
  },
  computed: {
    totalPrice() {
      let total = 0;
      this.data.detailInfo.forEach(x => {
        total = Number(x.OUT_AMOUNT) + total;
      });
      return total.toFixed(2);
    },
    totalQuantity() {
      let total = 0;
      this.data.detailInfo.forEach(x => {
        total = Number(x.OUT_QUANTITY) + total;
      });
      return total.toFixed(2);
    },
    appId() {
      return getAppId();
    }
  },
  methods: {
    fillInToDom() {
      this.isPreview = true;
    },
    handle() {
      // this.data.title = require('@/assets/img/beijing.png');
      console.log(this.appId, 'this.appId');
      if (this.appId == 'beijing') {
        this.data.title = require('@/assets/img/beijing.png');
      } else {
        this.data.title = require('@/assets/img/arcfox.png');
      }
      let dataList = JSON.parse(JSON.stringify(this.data.detailInfo));
      for (let i = 0; i < dataList.length; i++) {
        dataList[i].index = i;
      }
      let isJust = this.data.detailInfo.length % 29 == 0;
      let number = Math.ceil((this.data.detailInfo.length + 1) / 29);
      this.number = number;
      for (let i = 1; i <= number; i++) {
        if (number == i) {
          let obj = {};
          if (isJust) {
            obj.arr = [];
          } else {
            obj.arr = dataList.splice(0, dataList.length);
          }
          obj.index = i;
          obj.isLast = true;
          this.list.push(obj);
        } else {
          let obj = {};
          obj.arr = dataList.splice(0, 29);
          obj.index = i;
          obj.isLast = false;
          this.list.push(obj);
        }
      }
    }
  },
  mounted() {
    this.$emit('onPrintTable', this.$refs.print.innerHTML);
    if (this.isPreview) {
      this.fillInToDom();
    }
  }
};
</script>
<style scoped>
* {
  margin: 0;
  padding: 0;
}
</style>
